<template>
  <div class="content bg">
    <!-- 全屏容器组件  -->
    <dv-full-screen-container>
      <dv-loading v-if="isShow">Loading...</dv-loading>
      <div v-else>
        <!-- 第一行 -->
        <moduleTitle />
        <!-- 第二行 -->
        <moduleMains
          :configTow="config2"
          :configThree="config3"
          :configFour="config4"
        />
        <!-- 第三行 -->
        <mainFooter />
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import moduleTitle from './moduleTitle.vue'
import moduleMains from './moduleMains.vue'
import mainFooter from './mainFooter.vue'
export default {
  name: 'HomeView',
  components: { moduleTitle, moduleMains, mainFooter },
  data() {
    return {
      isShow: true,
      config2: {
        data: [
          {
            name: '南阳2',
            value: 167,
          },
          {
            name: '周口',
            value: 67,
          },
          {
            name: '漯河',
            value: 123,
          },
          {
            name: '郑州',
            value: 55,
          },
          {
            name: '西峡',
            value: 98,
          },
        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '单位',
        showValue: true,
      },
      config3: {
        data: [66],
        shape: 'rect',
        colors: ['skyblue', 'blue'],
        waveOpacity: 0.4,
      },
      config4: {
        centerPoint: [0.48, 0.35],
        points: [
          [0.52, 0.23],
          [0.43, 0.29],
          [0.59, 0.35],
          [0.53, 0.47],
          [0.45, 0.54],
          [0.36, 0.38],
          [0.62, 0.55],
          [0.56, 0.56],
          [0.37, 0.66],
          [0.55, 0.81],
          [0.55, 0.67],
          [0.37, 0.29],
          [0.2, 0.36],
          [0.76, 0.41],
          [0.59, 0.18],
          [0.68, 0.17],
          [0.59, 0.1],
        ],
        flylineColor: '#fff',
        bgImgUrl: require('../assets/img/map.jpg'),
        pointsImg: {
          url: require('../assets/img/mapPoint.png'),
        },
        centerPointImg: {
          url: require('../assets/img/mapCenterPoint.png'),
        },
      },
    }
  },
  created() {
    setTimeout(() => {
      this.isShow = false
    }, 500)
  },
}
</script>
